import { useState } from 'react'
import './index.scss'
import { Button } from 'antd'

function List() {
	const [list] = useState([
		{ title: 'AA', num: 0 },
		{ title: 'BB', num: 0 },
	])
	const [cart, setCart] = useState([])

	const onAdd = (item, i) => {
		if (cart[i]?.name) {
			cart[i].count += 1
		} else {
			cart.splice(i, 0, {
				name: item.title,
				count: item.num + 1,
			})
		}
		setCart([...cart])
	}

	return (
		<div className="shop-cart">
			<ul>
				{
					list.map((item, i) => (
						<li key={i}>
							<img src={require('../../img/1-400x300.jpg')} alt="列表" />
							<div>{item.title}</div>
							<Button type="primary" onClick={onAdd.bind(this, item, i)}>Add</Button>
						</li>
					))
				}
			</ul>
			{/* 购物车 */}
			{
				cart.map((item, i) => (
					<div key={i}>
						<div>name: {item.name} count: {item.count}</div>
					</div>
				))
			}
		</div>
	)
}

export default List